<!--
 * @Descripttion: 查看对账结果
 * @version:
 * @Author: 张文韬
 * @Date: 2020-10-13 11:49:35
 * @LastEditors: 穆宏宇
 * @LastEditTime: 2020-11-17 11:02:56
-->
<template>
  <el-tabs v-model="activeName"
           type="card"
           @tab-click="handleTabClick">
    <el-tab-pane label="中心端订单"
                 name="first">
      <el-card class="box-card">
        <e-search ref="searchFormRef"
                  :form-options="formOptions"
                  :form-label-width="searchLabelWidth"
                  :refresh-show="true"
                  @on-search="searchControlHandle"
                  @on-refresh="refreshControlHandle"
                  @change-height="changeControlHeight" />
        <el-row class="options-Area"
                type="flex"
                justify="end">
          <el-button @click="handleExportRecordResult()"
                     type="primary"
                     size="small">导出结果</el-button>
        </el-row>
        <div class="table-box">
          <!-- table 数据表格 START -->
          <e-table :data="tableData"
                   :columns="columns"
                   stripe
                   border
                   :max-height="tableMaxHeight"
                   style="width: 100%"
                   @selection-change="changeTableSelectData"
                   :page-show="true"
                   :current="pageData.pageNum"
                   :total="pageData.total"
                   @page-size-change="changePageSize"
                   @page-current-change="changePageCurrent">
          </e-table>
          <!-- table 数据表格 END -->
        </div>

      </el-card>
    </el-tab-pane>
    <el-tab-pane label="供应商订单"
                 name="second">
      <el-card class="box-card">
        <e-search ref="searchFormRef"
                  :form-options="formOptions"
                  :form-label-width="searchLabelWidth"
                  :refresh-show="true"
                  @on-search="searchControlHandle"
                  @on-refresh="refreshControlHandle"
                  @change-height="changeControlHeight" />
        <el-row class="options-Area"
                type="flex"
                justify="end">
          <el-button @click="handleExportRecordResult()"
                     type="primary"
                     size="small">导出结果</el-button>
        </el-row>
        <div class="table-box">
          <!-- table 数据表格 START -->
          <e-table :data="tableData"
                   :columns="columns1"
                   stripe
                   border
                   :max-height="tableMaxHeight"
                   style="width: 100%"
                   @selection-change="changeTableSelectData"
                   :page-show="true"
                   :current="pageData.pageNum"
                   :total="pageData.total"
                   @page-size-change="changePageSize"
                   @page-current-change="changePageCurrent">
          </e-table>
          <!-- table 数据表格 END -->
        </div>
      </el-card>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import eManage from '@/components/e-manage'
import eSearch from '@/components/e-search'
import { formOptions, btns } from './control'
import columns from './columns'
const columns1 = [...columns]
columns1.splice(1,1)
import { centerDownload, shopResultDownload, supplierRecordResultList, centerRecordResultList, suppliersForSelfOperatedPrice } from '@/api/admin.api'
const baseUrl = process.env.VUE_APP_BASE_API

export default {
  name: 'record-result',
  components: {
    eManage,
    eSearch
  },
  props: {},
  data () {
    return {
      formOptions,
      searchLabelWidth: '100px',
      searchRefreshShow: false,
      btns,
      columns,
      columns1,
      editFormLabelWidth: '100px',

      activeName: 'first',
      // 编辑框是否展示
      editDialogShow: false,
      // 编辑框表单数据
      dialogFormCurrent: {},
      // 查询表单
      searchFormData: {},
      // 控制区高度
      controlHeight: 0,
      // 表格数据
      tableData: [],
      // 分页数据
      pageData: {
        // 当前分页
        pageNum: 1,
        // 分页条数
        pageSize: 10,
        // 数据总数
        total: 0
      },
      // 表格选中数据
      tableSelectData: [],
    }
  },
  watch: {},
  computed: {
    // 组合查询条件和分页
    searchData () {
      const { pageNum, pageSize } = this.pageData
      return { ...this.searchFormData, size: pageSize, current: pageNum }
      // return Object.assign(this.searchFormData,{size: pageSize},{current:pageNum})
    },
    // 表单实例
    dialogForm () {
      return this.$refs.dialogForm
    },
    //表格最大高度
    tableMaxHeight () {
      return window.innerHeight - this.controlHeight - 300
    }
  },
  created () {
    this.init()
  },
  methods: {
    /**
     * @functionName init
     * @description 页面初始化
     * @author 张航
     * @date 2020-09-09 08:40:06
     * @version V1.0.0
     */
    init () {
      this.getTableData()
      this.getLabelData()
    },
    // 获取菜单弹出项
    getLabelData () {
      // 获取电商筛选类型
      suppliersForSelfOperatedPrice().then((res)=>{
        res.map((item, index) => {
          const optionObj = {}
          optionObj.value = item.supplierId
          optionObj.label = item.supplierName
          this.$set(this.formOptions[0].options, index, optionObj)
        })
      })
    },
    /**
     * @functionName searchControlHandle
     * @param {Object} data 查询参数
     * @description 查询
     * @author 张航
     * @date 2020-09-08 15:01:26
     * @version V1.0.0
     */
    searchControlHandle (data) {
      this.searchFormData = data
      this.refreshPageCurrent()
    },
    /**
     * @functionName refreshControlHandle
     * @param {Object} data 重置后的数据
     * @description 重置查询条件
     * @author 张航
     * @date 2020-09-08 17:01:51
     * @version V1.0.0
     */
    refreshControlHandle (data) {
      this.searchFormData = data
    },
    /**
     * @functionName changeControlHeight
     * @param {String} height 控制区占用高度
     * @description 控制区高度变化
     * @author 张航
     * @date 2020-09-16 16:17:07
     * @version V1.0.0
     */
    changeControlHeight (height) {
      this.controlHeight = height
    },
    /**
     * @functionName changeTableSelectData
     * @param {Array} rows 选中数据
     * @description 表格选中数据改变
     * @author 张航
     * @date 2020-09-08 17:52:12
     * @version V1.0.0
     */
    changeTableSelectData (rows) {
      this.tableSelectData = rows
    },
    /**
     * @functionName checkTableSelectData
     * @return {Number} 返回结果
     * @description 方法描述
     * @author 张航
     * @date 2020-09-10 09:58:59
     * @version V1.0.0
     */
    checkTableSelectData () {
      if (this.tableSelectData.length === 0) {
        this.$alert('至少选择一条数据！', '提示', {
          confirmButtonText: '确定'
        })
      }
      return this.tableSelectData.length
    },
    /**
     * @functionName changePageSize
     * @param {Number} size 分页条数
     * @description 修改分页条数
     * @author 张航
     * @date 2020-09-08 17:57:06
     * @version V1.0.0
     */
    changePageSize (size) {
      this.pageData.pageSize = size
      this.getTableData()
    },
    /**
     * @functionName changePageCurrent
     * @param {Number} current 当前分页
     * @description 修改当前分页
     * @author 张航
     * @date 2020-09-08 18:02:03
     * @version V1.0.0
     */
    changePageCurrent (current) {
      this.pageData.pageNum = current
      this.getTableData()
    },
    /**
     * @functionName refreshPageCurrent
     * @description 重置当前分页
     * @author 张航
     * @date 2020-09-22 10:45:57
     * @version V1.0.0
     */
    refreshPageCurrent () {
      this.pageData.pageNum = 1
      this.getTableData()
    },
    /**
     * @functionName getTableData
     * @description 获取表格数据
     * @author 张航
     * @date 2020-09-08 17:59:45
     * @version V1.0.0
     */
    getTableData () {
      // console.log(this.searchData)
      if (this.activeName  === 'first') {
        centerRecordResultList(this.searchData).then(res => {
          this.tableData = res.records
          this.pageData.total = res.total
        })
      }
      else {
        supplierRecordResultList(this.searchData).then(res => {
          this.tableData = res.records
          this.pageData.total = res.total
        })
      }
    },
    /**
     * @functionName handleSyncSupplierBills
     * @description 保存下载的文件
     * @author 张文韬
     * @date 2020-10-25 14:28:32
     * @version V1.0.0
     */
    saveAs(blob, filename) {
      if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, filename);
      }
      else {
        var link = document.createElement("a");
        var body = document.querySelector("body");
        link.href = window.URL.createObjectURL(blob);
        link.download = filename;
        link.style.display = "none";
        body.appendChild(link);
        link.click();
        body.removeChild(link);
        window.URL.revokeObjectURL(link.href);
      }
    },
    /**
     * @functionName handleSyncSupplierBills
     * @description 导出对账结果
     * @author 张文韬
     * @date 2020-10-25 14:28:32
     * @version V1.0.0
     */
    handleExportRecordResult () {
      const  {searchFormData} = this
      if (this.activeName === 'first') {
        centerDownload(searchFormData).then((res) => {
          let blob = new Blob([res], { type: "application/vnd.ms-excel" });
          this.saveAs(blob, "中心端对账结果.xlsx");
        });
      }
      else {
        shopResultDownload(searchFormData).then((res) => {
          let blob = new Blob([res], { type: "application/vnd.ms-excel" });
          this.saveAs(blob, "供应商对账结果.xlsx");
        });
      }
    },
    handleTabClick(tab, event) {
      // console.log({tab, event})
      const formData = tab.$children[0].$children[0].formData
      this.searchFormData = formData
      // this.searchFormData = {}

      // const formData = this.$refs['searchFormRef'].formData
      // console.log(formData)
      // this.$set(this,'searchFormData',formData);
      // this.$forceUpdate()
      // // this.$refs['searchFormRef'].$refs['searchForm'].handleRefresh()
      // // this.$set(this.$refs['searchFormRef'],'formData', this.$refs['searchFormRef'].$options.formData)
      this.getTableData()
    }
  },
  mounted () { }
}
</script>
<style lang="scss">
.el-tabs {
  background-color: white;
}
.box-card {
  margin: 4px;
  padding: 10px;
  height: calc(100vh - 200px);
  .el-card__body {
    padding: 0;
  }
}
.abc-header {
  color: #0000ff;
}
.control-box {
  margin-bottom: 10px;
}
.options-Area{
  margin-bottom: 10px;
}
</style>
